@charset "utf-8"; 

*{
    padding:0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

img{
    display: block;
    width: 100%;
    height: 100%;
}

.box{
    margin: 10px auto;
    width: 500px;
    border: 1px solid #000;
    user-select: none;
    
    .img_box{
        position: relative;
        ul{
            position: relative;
            height: 200px;
            li{
                width: 400px;
                border-radius: 20px;
                overflow: hidden;
                position: absolute;
                bottom: 20px;
                transition: 0.3s ease-in-out;

                &.list01{
                    transform: translateX(-41px) scale(0.8);
                    z-index: 1;
                }
                &.list02{
                    transform: translateX(50px) scale(1);
                    z-index: 3;
                }
                &.list03{
                    // img-width = 400*0.8=320px
                    // img-offL:500-320 = 180px
                    transform: translateX(180px) scale(0.8);
                    z-index: 1;
                    transform-origin: left center;
                }
                &.list04{
                    transform: translateX(100px) scale(0.8);
                    transform-origin: left center;
                }

            }
        }
        .lt,
        .rt{
            width: 30px;
            background-color: rgba(0, 0, 0, 0.521);
            color: #bababa;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 35%;
            z-index: 999;
            cursor: pointer;
        }
        .lt{
            left: 0;
        }
        .rt{
            right: 0;
        }
        .dot_box{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            span{
                width: 20px;
                height: 4px;
                background-color: rgb(0, 119, 128);
                margin: 0 5px;
                cursor: pointer;

                &.dot_active{
                    background-color: rgb(255, 153, 0);
                }
            }
        }
    }

    
}